<template>
  <div class="container">
    <h3 class="container__title">操盘中项目状态管理</h3>
    <ATable :table-title="tableTitle" :table-data="tableData" @operate="operateItem" class="table__contaienr"/>
    <div class="page_box" v-if="totalPage > 1">
      <page-bar :select="forward" :count="totalPage" :current="pageNumber"/>
    </div>
  </div>
</template>

<script>
import {ATable, PageBar} from '@/components';
import Api from '@/api';
import dayjs from 'dayjs';

export default {
  components: {
    ATable,
    PageBar
  },
  data() {
    return {
      pageNumber: 1,
      totalPage: 1,
      tableTitle: ['项目名称', '股侠ID', '项目类型', '交易周期', '操盘开始时间', '操盘计划结束时间', '操作'],
      tableData: {
        list: [
          // [
          //   {
          //     value: '天下第一',
          //   },
          //   {
          //     value: '哈哈侠',
          //   },
          //   {
          //     value: '稳赢型',
          //   },
          //   {
          //     value: 'T+20',
          //   },
          //   {
          //     value: '2018.09.09',
          //   },
          //   {
          //     value: '2018.09.09',
          //   },
          //   {
          //     value: '100%',
          //   },
          // ]
        ],
        operate: {
          name: '结束'
        }
      },
      dataList: []
    }
  },
  created() {
    this.getFinishedList()
  },
  methods: {
    operateItem(val) {
      const { dataList } = this;
      const item = dataList[val];
      this.$router.push({name: 'finisheddetail',  params: { id: item.projectId }});
    },
    getFinishedList() {
      const { pageNumber } = this;
      Api.getFinishedList({
        pageNumber: pageNumber - 1,
        pageSize: 10,
      }).then(res => {
        this.totalPage = res.data.totalPage;
        const { projectList } = res.data;
        this.tableData.list = projectList.map(val => {
          return [
            {
              value: val.name
            },
            {
              value: val.operaterName
            },
            {
              value: val.type
            },
            {
              value: 'T +' + val.period
            },
            {
              value: val.startTime == 0 ? '-' : this.formatDay(val.startTime)
            },
            {
              value: val.endTime == 0 ? '-' : this.formatDay(val.endTime)
            },
          ]
        });
        this.dataList = projectList;
        console.log(res)
      })
    },
    forward(pageNo) {
      console.log('pageNo',pageNo);
      this.pageNumber = pageNo;
      this.getFinishedList()
    },
    formatDay(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm');
    }
  }
}
</script>

<style lang="stylus" scoped>
.container__title
  font-size 18px
  margin-bottom 30px
  font-weight: normal
.container 
  min-height 100%;
  position relative
  display flex
  flex-direction: column
.nav__container
  display flex
  margin-bottom 20px
.nav__item
  width 130px
  height 30px
  line-height 30px
  text-align center
  cursor pointer
  border-bottom: 5px solid red
  background #fff
.nav__item--active
  background red
  color #ffffff
.page_box
  display: flex;
  justify-content:center;
.table__contaienr
  flex: 1
</style>
